import React from 'react';
import classnames from 'classnames';
import styles from './index.module.less';

/**
 * Flex 组件属性
 */
export interface FlexProps {
  /** 自定义 CSS 类名 */
  className?: string;
  /** 自定义内联样式 */
  style?: React.CSSProperties;
  /** 子元素内容 */
  children?: React.ReactNode;
  /** flex-direction 属性
   * - row: 水平排列（默认）
   * - column: 垂直排列
   * - row-reverse: 水平反向排列
   * - column-reverse: 垂直反向排列
   */
  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
  /** justify-content 属性
   * - flex-start: 起始端对齐（默认）
   * - flex-end: 末尾端对齐
   * - center: 居中对齐
   * - space-between: 两端对齐
   * - space-around: 环绕对齐
   * - space-evenly: 平均分布对齐
   */
  justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
  /** align-items 属性
   * - flex-start: 起始端对齐
   * - flex-end: 末尾端对齐
   * - center: 居中对齐（默认）
   * - baseline: 基线对齐
   * - stretch: 拉伸对齐
   */
  align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
  /** flex-wrap 属性
   * - nowrap: 不换行（默认）
   * - wrap: 换行
   * - wrap-reverse: 反向换行
   */
  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
  /** gap 属性，设置子元素之间的间距 */
  gap?: number | string;
  /** 是否垂直排列，等同于 direction="column" */
  vertical?: boolean;
  /** 是否内联 flex 容器 */
  inline?: boolean;
  /** flex 属性，设置 flex 容器的伸缩性 */
  flex?: React.CSSProperties['flex'];
  /** 点击事件 */
  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
}

/**
 * Flex 组件
 * 基于 CSS Flexbox 的布局组件，提供简化的 API 接口
 */
export const Flex: React.FC<FlexProps> = ({
  className,
  style,
  children,
  direction = 'row',
  justify = 'flex-start',
  align = 'flex-start',
  wrap = 'nowrap',
  gap,
  vertical = false,
  inline = false,
  flex,
  onClick,
}) => {
  const flexClass = classnames(
    styles.flex,
    {
      [styles.inline]: inline,
      [styles[`direction-${vertical ? 'column' : direction}`]]: true,
      [styles[`justify-${justify}`]]: true,
      [styles[`align-${align}`]]: true,
      [styles[`wrap-${wrap}`]]: true,
    },
    className
  );

  const flexStyle: React.CSSProperties = {
    ...style,
    flex,
  };

  // 处理 gap 属性
  if (gap !== undefined) {
    if (typeof gap === 'number') {
      flexStyle.gap = `${gap}px`;
    } else {
      flexStyle.gap = gap;
    }
  }

  return (
    <div className={flexClass} style={flexStyle} onClick={onClick}>
      {children}
    </div>
  );
};

export default Flex;
